<%@ page language="java" contentType="text/html" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/pages/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <%@include file="/WEB-INF/pages/common/head.jsp"%>
    <title><spring:message code="title.function"/></title>
    <script type="text/javascript" language="javascript">
	    //表单数据
	    var treegrid;
	     //本页面的提示信息
	    var message =$.messager;
	    //弹出Dialog
	    var entityDialog;
	    var href ="";
	    var title ="";
        $(function () {
        	treegrid = $('#tt').treegrid({
                url:'${path}/sys/function/ajaxTreeGrid.do',
                toolbar:'#tb',
                onContextMenu: onContextMenu,
                onDblClickRow:function(row){
                	$(this).treegrid('select', row.id);
                	edit();
                }
            });
        });
        function onContextMenu(e,row){  
            e.preventDefault();  
            $(this).treegrid('select', row.id);  
            $('#menu').menu('show',{  
                left: e.pageX,  
                top: e.pageY  
            });  
        } 
        function append() {
    		//弹出层的相关参数
        	entityDialog = $("#entityDialog").dialog({
    			title : title,collapsible:true,maximizable:true,
    			buttons : [{
    				iconCls:"icon-save",
    				text : '<spring:message code='button.save'/>',
    				handler : function() {
    					$("#openEntityCUIframe")[0].contentWindow.manageForm(message);
    				}
    			},{
    				iconCls:"icon-no",
    				text : '<spring:message code='button.close'/>',
    				handler : function() {
    					//关闭按钮的时候进行关闭按钮
    					entityDialog.dialog('close');
    				}
    			}]
    		});
        	$('#openEntityCUIframe')[0].src=imonJYRH.url(href); 
        	entityDialog.dialog('open');
        	imonJYRH.showZone();
        }
        //子页面返回方法
		function returnResult(node,isAdd){
			 entityDialog.dialog('close');
			 if(isAdd){
				 $('#tt').treegrid('append',{ 
	                parent: node.parentId,  
	                data: [{
	                    id: node.id,  
	                    text: node.text,  
	                    icon: node.icon,  
	                    url: node.url,  
	                    rowNo: node.rowNo
	                }]
			 	});
			 }else{
				 $('#tt').treegrid('update',{ 
	                id: node.id,  
	                row: {
	                    id: node.id,  
	                    text: node.text,  
	                    icon: node.icon,  
	                    url: node.url,  
	                    rowNo: node.rowNo
	                }
				 });
			 }
			 $('#tt').treegrid('select', node.id);
		}
        
        function add(pId){
        	var node = $('#tt').treegrid('getSelected');
        	href ="${path}/sys/function/addUI.do";
        	if(node){
        		href ="${path}/sys/function/addUI.do?parentCode="+node.id;
        	}
        	title ="<spring:message code='msg.create'/>";
        	append();
        }
        function edit(){
        	var node = $('#tt').treegrid('getSelected');
        	if(!node){
        		message.show({ msg : "请选择", title : '提示',showType:'slide'});
        		return;
        	}
        	href ="${path}/sys/function/modifyUI.do?code="+node.id;
        	title ="<spring:message code='msg.modify'/>";
        	append();
        }
        function collapseAll(){
            $('#tt').treegrid('collapseAll'); 
		}
        function expandAll(){
            $('#tt').treegrid('expandAll'); 
		}
        function ref(){
        	treegrid.treegrid('unselectAll');
 			treegrid.treegrid('reload');
        }
        function deleteNode(){
        	var node = $('#tt').treegrid('getSelected');
        	if(!node){
        		$.messager.alert('<spring:message code='msg.error'/>','<spring:message code='msg.delete'/>','error');
        		return;
        	}
        	$.ajax({
    			url : imonJYRH.url("${path}/sys/function/ajaxDelete.do"),
    			data : {code:node.id},
    			success : function(reMsg) {
    				if(reMsg.success){
    					$('#tt').treegrid('remove', node.id);
    	            }
    	            message.show({ msg : reMsg.msg, title : '提示',showType:'slide'});
    			    imonJYRH.hideZone();
    			}
    		});
        }
       
    </script>
</head>
<body>
	<table id="tt" idField="id" treeField='text' fit="true" fitColumns="true" rownumbers="true">
		<thead>
			<tr>
				<th width ="70" field='text'>菜单名称</th>
				<th width ="70" field='icon'>菜单图标</th>
				<th width ="70" field='url' >菜单地址</th>
				<th width ="70" field='rowNo'>排序</th>
			</tr>
		</thead>
	</table>
	<div id="tb">
        <a class="easyui-linkbutton" iconCls="icon-add" id="add" onclick="add()" plain="true" href="javascript:void(0);">增加</a>
		<a class="easyui-linkbutton" iconCls="icon-edit" onclick="edit()" plain="true" href="javascript:void(0);">编辑</a>
		<a class="easyui-linkbutton" iconCls="icon-cancel" onclick="deleteNode()" plain="true" href="javascript:void(0);">删除</a>
		<a class="easyui-linkbutton" iconCls="icon-reload" onclick="ref()" plain="true" href="javascript:void(0);">刷新</a>
		<a class="easyui-linkbutton" iconCls="icon-redo" onclick="collapseAll()" plain="true" href="javascript:void(0);">收起</a>
		<a class="easyui-linkbutton" iconCls=icon-undo onclick="expandAll()" plain="true" href="javascript:void(0);">展开</a>
    </div>
	
	<div id="entityDialog" class="easyui-dialog" style="width:520px;height:380px;" data-options="iconCls:'icon-save',resizable:true,modal:true,closed: true">  
   		<iframe scrolling="auto" id='openEntityCUIframe' frameborder="0"  src="" style="width:100%;height:100%;"></iframe>
	</div>  

	<div id="menu" class="easyui-menu" style="width:120px;display: none;">
		<div onclick="add();" data-options="iconCls:'icon-add'">增加</div>
		<div onclick="edit();" data-options="iconCls:'icon-edit'">编辑</div>
		<div onclick="deleteNode();" data-options="iconCls:'icon-remove'">删除</div>
	</div>
	
</body>
</html>
